export const addNewsListDisorder = (editor) => {
  const opts = {
    id: "news-list-disorder",
    label: "News List Disorder",
    classPrefix: "news-list-disorder",
    style: "",
    styleAdditional: "",
  };

  const { Components,BlockManager } = editor;
  const { id, label } = opts;

  const newsListPfx = opts.classPrefix;
  const idContainer = `${id}-container`;
  const idNewsItem = `${id}-news-item`;
  const idNewsLink = `${id}-news-link`;

  Components.addType(id, {
    model: {
      defaults: {
        name: label,
        attributes: { class: newsListPfx,'data-gjs-type':id },
        components: { type: idContainer },
        styles:
          (opts.style ||
            `
          .${newsListPfx} {
            padding: 0;
            margin: 0;
            width: 100%;
            display:flex;
          }

          .${newsListPfx}-container {
            display: flex;
            flex-direction: column;
            list-style-type: square;
            width: 96%;
          }

          .${newsListPfx}-item {
            border-bottom: 1px dotted #000;
            // padding: 10px 0;
            padding:2px;
            margin-bottom: 5px;
          }

          .${newsListPfx}-link {
            color: inherit;
            // text-decoration: none;
            float:left;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 98%;
          }
        `) + opts.styleAdditional,
      },
    },
  });

  Components.addType(idContainer, {
    model: {
      defaults: {
        attributes: {
          class: `${newsListPfx}-container`,
          "data-gjs": "news-list",
          'data-gjs-type':idContainer
        },
        name: "News List Container",
        // draggable: false,
        // removable: false,
        // copyable: false,
        // highlightable: false,
        tagName:'ul',
        components: [
          {
            type: idNewsItem,
            components: [{ type: idNewsLink, components: "机房分布" }],
          },
          {
            type: idNewsItem,
            components: [{ type: idNewsLink, components: "实验中心介绍" }],
          },
        ],
      },
    },
  });

  Components.addType(idNewsItem, {
    model: {
      defaults: {
        tagName:'li',
        name: "News Item",
        attributes: { class: `${newsListPfx}-item`,'data-gjs-type':idNewsItem },
      },
    },
  });

  Components.addType(idNewsLink, {
    extend: "link",
    model: {
      defaults: {
        name: "News Link",
        draggable: `[data-gjs-type="${idContainer}"]`,
        attributes: { class: `${newsListPfx}-link`,'data-gjs-type':idNewsLink },
      },
    },
  });

  BlockManager.add("news-list-disorder", {
    label: "多列新闻",
    category: "新闻类",
    media:`<svg t="1720769522976" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35724" width="30" height="30"><path d="M198.193548 297.290323h620.544v38.779871H198.193548V297.290323z m0 193.915871h620.544v38.796387H198.193548V491.189677z m0 193.932387h620.544v38.779871H198.193548v-38.779871z" p-id="35725"></path></svg>`,
    select: true,
    content: { type: "news-list-disorder" },
  });
};
